<template>
  <div>
    <!-- 输入框 -->
    <el-input placeholder="请输入内容" v-model="input3">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <!-- 按钮 -->
    <el-button
      type="primary"
      @click="addlist"
      class="add"
      >添加</el-button
    ><el-button type="warning" round>批量删除</el-button>
    <!-- 添加框 -->
    <from-menu
      ref="child"
      :addstatus="addstatus"
      :toplist="toplist"
      :editdata="editdata"
      :forbidden="forbidden"
     @updataPages="updataPages"
    ></from-menu>
    <!-- 表格 -->
    <list-menu :toplist="toplist" @edit="edit" @updataPages="updataPages"></list-menu>
  </div>
</template>

<script>
import fromMenu from "./components/form.vue";
import listMenu from "./components/list.vue";

export default {
  props: {},
  data() {
    return {
      input3: "", // 搜索框
      addstatus: {
        flag: false,
      }, //添加框状态
      toplist: [],
      editdata: {},
      forbidden: false,
    };
  },
  computed: {},
  created() {
    // 获取菜单列表
    this.updataPages();
  },
  mounted() {},
  watch: {},
  methods: {
    // 修改
    edit(obj) {
      this.forbidden = true;
      this.addstatus.flag = true;
      delete obj.children;
      this.$refs.child.form = JSON.parse(JSON.stringify(obj));
    },
    // 添加
    addlist() {
      this.addstatus.flag = true;
      this.forbidden = false;
    },
    updataPages() {
      this.$api
        .getmenulist({ istree: true })
        .then((res) => {
          this.toplist = res.data.list;
        })
        .catch((err) => console.log(err));
    },
  },
  components: { fromMenu, listMenu },
};
</script>

<style scoped lang="scss">
::v-deep .el-input {
  width: 300px;
}
.add {
  margin: 0 10px;
}
</style>
